<template>
  <!-- 关于顶部切换栏 -->
  <div class="d2x">
    <!-- 占位置的 -->
    <div class="dq">1</div>
    <!-- 切换样式 -->
    <div v-if="$store.state.name == ''" class="div">
      <span @click="account">注册</span>|<span @click="dj(0.1)">登陆</span>
    </div>
    <div v-if="$store.state.name != ''" @click="dj(0.2)" class="div">
      欢迎{{ $store.state.name }}
    </div>
    <div @click="dj(1)" :class="zt == 1 ? 'dfg' : 'div'">谁的订单</div>
    <div @click="dj(2)" :class="zt == 2 ? 'dfg' : 'div'">收藏</div>
    <div @click="dj(3)" :class="zt == 3 ? 'dfg' : 'div'">
      购物车( {{ $store.state.list.length }} )
    </div>
    <!-- 占位置的1 -->
    <div class="dq2">2</div>
  </div>
</template>
<script>
export default {
  props: ["zt"],
  data() {
    return {};
  },
  methods: {
    dj(a) {
      //点击修改zt
      if (a == 0.1 || a == 0.2) {
        this.$emit("logint", a);
      }
      this.$emit("remb", a);
      //   跳转路由
      if (a == 1) {
        this.$router.push("/detai");
      }
      if (a == 2) {
        this.$router.push("/storea");
      }
      if (a == 3) {
        this.$router.push("/gwc");
      }
    },
    account(){
      this.$router.push('/account')
    }
  },
};
</script>
<style scoped>
.d2x {
  width: 100%;
  height: 56px;
  background: black;
}
div {
  color: darkgray;
  font-size: 17px;
  text-align: center;
  line-height: 56px;
  width: 9.2%;
  height: 100%;
  display: inline-block;
}
.div {
  color: darkgray;
  font-size: 17px;
  text-align: center;
  line-height: 56px;
  width: 9.2%;
  height: 100%;
  display: inline-block;
}
.dfg {
  color: floralwhite;
  font-size: 19px;
  font-weight: 200;
  text-align: center;
  line-height: 56px;
  width: 9.2%;
  background: orangered;
  height: 100%;
  display: inline-block;
}
.dq {
  color: #000;
  width: 57%;
}
.dq2 {
  color: #000;
  width: 6%;
}
</style>